import React from 'react';
import { connect } from 'dva';
import styles from './clothes.less';
import { Grid } from 'antd-mobile';
import MyJRoll from '../../../../utils/MyJRoll/Yr.js'
import { getData } from '../../../../utils/localData'

@connect(({global,tableGoods }) => ({
  global,tableGoods
}))
export default class Clothes extends React.Component {

    render() {
        let sss = 0 
        let clientWidth = document.documentElement.clientWidth
        let clientHeight = document.documentElement.clientHeight
        if(clientWidth>=750){
          sss = 100;
        }else{
          sss = 100 * (clientWidth / 750);
        }
        let s2 =  clientHeight - (sss*2.4 + sss*0.78 + sss*0.2 + sss*0.98 + sss*0.64)
        console.log(this.props.tableGoods.goodsList)
        let goodsData = this.props.tableGoods.goodsList[this.props.index]
        if(!goodsData){
          return null
        }
        let ss = goodsData.length;
        if(ss%3!=0){
          let ll = 3 - ss%3
          for(let i = 0; i < ll; i++){
            goodsData.push({})
          }
        }
        let rrsID = "rr"+this.props.index
        return (
          <MyJRoll
            ID={rrsID}
            height={s2+"px"}
          >
          <div className={styles.cloth_ma}>
              <Grid data={goodsData}
                    hasLine={false}
                    columnNum={3}
                    activeStyle={false}
                    square={false}
                    renderItem={(dataItem,i) => {
                    return (
                    <div className={(dataItem.commodityName&&(i+1)%3!=0)?styles.cloth_eve:styles.cloth_eve2}>
                      {dataItem.commodityName?
                      <div>
                        <img src={dataItem.commodityImgUrl} className={styles.cloth_img} alt="" />
                        <div className={styles.cloth_text1}>
                          {dataItem.commodityName}
                        </div>
                        <div className={styles.cloth_text2}> <span className={styles.cloth_text4}>￥</span>{dataItem.currentPrice}</div>
                        <img src={"./img/add.png"} onClick={this.addCart.bind(this)} datav={dataItem.businessCommodityId} className={styles.cloth_add} alt="" />
                      </div>
                      :
                      null}
                  </div>)
                }}
              />
          </div>
          </MyJRoll>
        )
    }

    addCart(e){
      this.props.addClick(e)//点击添加动效
      let businessCommodityId = e.target.getAttribute("datav")
      const { dispatch } = this.props
      let businessId = getData("businessId");
      let user = JSON.parse(getData("userInfo"));
      dispatch({
          type: 'shoppingCart/addShoppingCart',
          payload: {
            addQ:{
              businessId:businessId,
              userId:user.userId,
              businessCommodityId:businessCommodityId
            },
            countQ: {
              businessId:businessId,
              userId:user.userId,
            }
          },
      })
    }

    componentDidMount(){
      const { dispatch } = this.props
      dispatch({
        type: 'tableGoods/selGoods4BT',
        payload: {businessId:this.props.global.BusinessInfo.businessId,categoryId:this.props.goodsType,index:this.props.index},
      })
    }

}
